<template>
  <view class="">
    <view class="header">
      <view style="padding: 0 38rpx">
        <view class="title">首页</view>
        <view class="selectShop" @click="showPopup = true">
          <image src="../../static/home/shop.png" mode="scaleToFill" />
          <view>{{ currentUser.FName || "" }}</view>
          <u-icon name="arrow-down" color="#fff"></u-icon>
        </view>
        <u-popup :show="showPopup" mode="bottom" @close="showPopup = false" :round="20">
          <view class="popupBox">
            <view class="popupTitle">店铺名称</view>
            <view class="popupList">
              <view class="popupItem" v-for="(item, index) in userInfo" @click="selectUser(item)" :key="index">
                {{ item?.FName }}
              </view>
            </view>
          </view>
        </u-popup>
      </view>
    </view>
    <view class="main bannerMain">
      <!-- <up-input placeholder="搜索内容" border="none" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #A8A8A8"></up-input> -->
      <image class="banner" src="../../static/home/banner.png" mode="scaleToFill" />
      <swiper style="height: 160px; margin-bottom: 20rpx" :indicator-dots="true" indicator-color="#fff" indicator-active-color="#21cca2">
        <swiper-item v-for="(item, index) in typeList" :key="index">
          <view class="walletList">
            <template v-for="(i, j) in item" :key="j">
              <view class="item" @click="goPage('')">
                <image class="icon" src="" mode=""></image>
                <view class="name">{{ i.FNAME }}</view>
              </view>
            </template>
          </view>
        </swiper-item>
      </swiper>
      <u-tabs
        :list="tabList"
        @click="tabClick"
        :activeStyle="{
          color: '#1E1E1E',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        lineWidth="26"
        keyName="FNAME"
        lineHeight="5"
        :itemStyle="{ display: 'flex' }"
        lineColor="linear-gradient(90deg, #1ec082 0%, rgba(18,127,254,0.1) 100%)"
      ></u-tabs>
      <view class="shopList">
        <template v-if="goodsList.length > 0">
          <GoodsItem class="shopC" v-for="(item, index) in goodsList" :key="index" :goodsInfo="{ ...item }" />
        </template>
        <view v-else style="width: 100%; display: flex; justify-content: center">
          <u-empty mode="list"></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { _chunk, goPage } from "../../utils/commonFn";
import GoodsItem from "../../components/goodsItem.vue";
import { queryGroupInfo, login, getInfo } from "../../api/home";
const typeList = ref<any[]>([]);
const tabList = ref([]);
const showPopup = ref(false);
const userInfo = ref<any[]>([]);
const currentUser = ref<any>([]);
onMounted(async () => {
  const res: any = await queryGroupInfo({
    formid: "SAL_MATERIALGROUP",
    data: {
      FieldKeys: "FID,FPARENTID,FNAME",
      FilterString: [
        {
          Left: "(",
          FieldName: "FPARENTID",
          Compare: "=",
          Value: 0,
          Right: ")",
          Logic: "AND",
        },
      ],
      OrderString: "",
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: "",
      formid: "SAL_MATERIALGROUP",
    },
  });

  let arr: GoodsTypes.firstGround[] = [];
  res.forEach((item: string[]) => {
    let firstObj = {
      FID: item[0],
      FPARENTID: item[1],
      FNAME: item[2],
    };
    arr.push(firstObj);
  });
  typeList.value = _chunk(arr, 10);
  // tabList.value = res;

  userInfo.value = uni.getStorageSync("userInfo");
  currentUser.value = uni.getStorageSync("userInfo")[0];
  uni.setStorageSync("currentUser", uni.getStorageSync("userInfo")[0]);
  console.log(userInfo.value);
});
const goodsList = ref([{}, {}]);
const tabClick = (e: any) => {
  console.log(e);
};
const selectUser = (item: string[]) => {
  console.log(item);
  currentUser.value = item;
  showPopup.value = false;
  uni.setStorageSync("currentUser", item);
};
</script>

<style lang="less" scoped>
.selectShop {
  display: flex;
  color: #fff;
  margin-bottom: 14rpx;
  & > image {
    width: 36rpx;
    height: 36rpx;
  }
  & > view {
    margin: 0 10rpx;
  }
}
/deep/ .u-input {
  background: #fff;
  padding: 10rpx !important;
  margin-bottom: 18rpx;
}
.bannerMain {
  margin-top: -420rpx;
  .banner {
    width: 100%;
    height: 318rpx;
  }
  .walletList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
    margin-top: 33rpx;
    .item {
      width: 20%;
      margin-bottom: 22rpx;
    }
    .name {
      font-size: 24rpx;
      color: #333333;
      line-height: 34rpx;
    }
    .icon {
      width: 60rpx;
      height: 60rpx;
      background: #27ca9e;
    }
  }

  /deep/ .uni-swiper-dots-horizontal {
    bottom: 0px;
  }
  /deep/ .uni-swiper-dot {
    width: 28rpx;
    height: 12rpx;
    border-radius: 6rpx;
  }
  /deep/ .u-tabs__wrapper__nav__item {
    padding: 0 14px !important;
  }
  .shopList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .shopC {
      width: 48% !important;
      margin-bottom: 20rpx;
    }
  }
}
.popupBox {
  height: 600arpx;
  overflow: auto;
  .popupTitle {
    text-align: center;
    font-size: 40rpx;
    position: fixed;
    background: #fff;
    width: 100%;
    line-height: 60rpx;
  }
  .popupList {
    padding-top: 30px;
  }
  .popupItem {
    padding: 0 20rpx;
    line-height: 40px;
    border-top: 1px solid #f3f3f3;
  }
}
</style>
